<template>
  <div>
    <div class="headtitle">我的收藏</div>
    <div class="main">
      <conSelect></conSelect>
      <div class="orders">
        <div class="title">
          <template v-for="(item, index) in orderStatus">
            <i
              :class="['lable', selected == index ? 'active' : '']"
              @click="clickStatus(index)"
              v-if="item.code != 'more'"
              >{{ item.lable }}</i
            >
            <select
              :class="[selected == index ? 'active' : '']"
              @click="clickStatus(index)"
              placeholder="其他"
              v-else-if="item.code == 'more'"
              class="lable"
            >
              <option
                v-for="ite in item.more"
                :value="ite.code"
                :label="ite.lable"
                :key="ite.lable"
              ></option>
            </select>
          </template>
        </div>
        <filters :pHSearchInfo="HSearchInfo" :pHSList="HSList"></filters>
        <div class="orderLists">
          <div class="head rb">
            <!-- <div>共100条</div>
            <div class="right row">
              <i class="num">1/1</i>
              <i class="borders">&lt</i><i class="borders">&gt</i>
            </div> -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="findByPage.pageNum"
              :page-sizes="[1, 5, 10, 20]"
              :page-size="findByPage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>

          <!-- <myTable1></myTable1> -->
          <bookList1
            lwidth="800"
            colNum="5"
            :bookList="bookList"
            v-if="bookList"
          ></bookList1>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      selected: 0,
      more: "其他",
      allselect: false,
      orderStatus: [
        {
          lable: "全部商品",
          value: "books",
          code: "",
          selected: false,
        },
        {
          lable: "店铺",
          value: "issuer",
          code: "",
          selected: false,
        },
        {
          lable: "未下架",
          value: "",
          code: "",
          selected: false,
        },
        {
          lable: "已下架",
          value: "",
          code: "",
          selected: false,
        },
      ],
      HSList: [
        {
          name: "订单号",
          type: "input",
          vm: "orderNumber",
        },
        {
          name: "书名",
          type: "input",
          vm: "bookName",
        },
        {
          name: "店铺/发布者",
          type: "input",
          vm: " issuer",
        },
        {
          name: "价格",
          type: "twoinput",
          vm: ["Hprice", "Lprice"],
        },
      ],
      HSearchInfo: {
        orderNumber: "",
        bookName: "",
        issuer: "",
        Hprice: "",
        Lprice: "",
      },
      findByPage: {
        userId: "",
        pageNum: 1,
        pageSize: 5,
      },
      bookList: [],
    };
  },
  components: {
    bookList1: () => import("@/components/book/bookList1.vue"),
    conSelect: () => import("@/components/util/conSelect.vue"),
    filters: () => import("@/components/util/filters.vue"),
    myTable1: () => import("@/components/util/myTable1.vue"),
  },
  mounted() {
    this.findByPage.userId = this.$store.state.user.user.userId;
    this.findAll();
  },
  methods: {
    clickStatus(index) {
      this.selected = index;
    },
    findAll() {
      this.$axios.post("sys/book/getlike", this.findByPage).then(({ data }) => {
        console.log(data);
        this.bookList = data.bookInfo;
        this.total = data.total;
      });
    },
    handleSizeChange(val) {
      this.findByPage.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      this.findByPage.pageNum = val;
      this.findAll();
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .headtitle {
    font-size: 24px;
    font-family: "font6";
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .orders {
    margin-top: 20px;
    .title {
      font-size: 12px;
      border-bottom: 2px solid rgb(181, 215, 227);
      .lable {
        z-index: 99;
        padding: 6px 10px;
        line-height: 2;
        margin-right: 10px;
        margin-bottom: 10px;
        background: linear-gradient(rgb(255, 255, 255), rgb(157, 203, 236));
      }
      .active {
        font-size: 16px;
        background: linear-gradient(rgb(157, 203, 236), rgb(255, 255, 255));
      }
      .lable:hover {
        .active;
      }
    }
  }
  .orderLists {
    margin: 0 auto;
    .head {
      line-height: 2;
      margin-right: 10px;
      margin-left: 10px;
      padding: 4px 10px;
      background: rgb(242, 239, 239);
      .right {
        padding-top: 4px;
        .num {
          margin-right: 10px;
          font-size: 10px;
        }
        .borders {
          height: 24px;
          line-height: 20px;
          text-align: center;
          display: inline;
          padding-left: 4px;
          padding-right: 4px;
          border: 1px solid lightgrey;
        }
      }
    }
  }
}
</style>